<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台系统开发</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/medea.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        
        
    </style>
</head>
<body>

    <header class="header">
        <div class="header-content xxlg-flex">
            <a class="logo" href="#"><img src="img/baidu_logo.png" alt="logo"></a>
            <span id="J_menuBtn" class="menu-btn xxlg-hide sm-flex"><i class="fa fa-align-justify" aria-hidden="true"></i></span>
            
            <ul class="nav-list xxlg-flex sm-hide" id="J_navlist">
                <li><a href="#">概况</a></li>
                <li><a href="#">教务</a></li>
                <li><a href="#">营销</a></li>
                <li><a href="#">运营</a></li>
                <li><a href="#">用户</a></li>
                <li><a href="#">交易</a></li>

            </ul>
        </div>
    </header>

    <nav class="menu">
        <!-- <div class="menu-item menu-item-active"> -->
        <div class="menu-item">
            <div class="menu-item-title">
                <i class="item-icon fa fa-address-book-o" aria-hidden="true" ></i><span>教学管理</span><i class="item-down fa fa-angle-down" aria-hidden="true" ></i>
            </div>
            <ul class="menu-item-body">
                <li><a href="#"><i class="item-icon fa fa-circle-o" aria-hidden="true" ></i>班级管理</a></li>
                <li><a href="#"><i class="item-icon fa fa-circle-o" aria-hidden="true" ></i>直播管理</a></li>
                <li><a href="#"><i class="item-icon fa fa-circle-o" aria-hidden="true" ></i>课程管理</a></li>
                <li><a href="#"><i class="item-icon fa fa-circle-o" aria-hidden="true" ></i>题库管理</a></li>
                <li><a href="#"><i class="item-icon fa fa-circle-o" aria-hidden="true" ></i>分类标签</a></li>

            </ul>
        </div>
        <div class="menu-item menu-item-acitve">
            <div class="menu-item-title">
                <i class="item-icon fa fa-beer" aria-hidden="true" ></i><span>通知管理</span><i class="item-down fa fa-angle-down" aria-hidden="true" ></i>
            </div>
            <ul class="menu-item-body">
                <li><a href="#"><i class="item-icon fa fa-circle-o" aria-hidden="true" ></i>班级管理</a></li>
                <li><a href="#"><i class="item-icon fa fa-circle-o" aria-hidden="true" ></i>直播管理</a></li>
                <li><a href="#"><i class="item-icon fa fa-circle-o" aria-hidden="true" ></i>课程管理</a></li>
                <li><a href="#"><i class="item-icon fa fa-circle-o" aria-hidden="true" ></i>题库管理</a></li>
                <li><a href="#"><i class="item-icon fa fa-circle-o" aria-hidden="true" ></i>分类标签</a></li>

            </ul>
        </div>
        <div class="menu-item">
            <div class="menu-item-title">
                <i class="item-icon fa fa-book" aria-hidden="true" ></i><span>课程管理</span><i class="item-down fa fa-angle-down" aria-hidden="true" ></i>
            </div>
            <ul class="menu-item-body">
                <li><a href="#"><i class="item-icon fa fa-circle-o" aria-hidden="true" ></i>班级管理</a></li>
                <li><a href="#"><i class="item-icon fa fa-circle-o" aria-hidden="true" ></i>直播管理</a></li>
                <li><a href="#"><i class="item-icon fa fa-circle-o" aria-hidden="true" ></i>课程管理</a></li>
                <li><a href="#"><i class="item-icon fa fa-circle-o" aria-hidden="true" ></i>题库管理</a></li>
                <li><a href="#"><i class="item-icon fa fa-circle-o" aria-hidden="true" ></i>分类标签</a></li>

            </ul>
        </div>
    </nav>
    <main class="main">
        <div class="main-row first-row">
            <div class="col col-xxlg-3 col-lg-6 col-sm-12">
                <div class="col-content">

                </div>
            </div>
            <div class="col col-xxlg-3 col-lg-6 col-sm-12">
                <div class="col-content">

                </div>
            </div>
            <div class="col col-xxlg-3 col-lg-6 col-sm-12">
                <div class="col-content">

                </div>
            </div>
            <div class="col col-xxlg-3 col-lg-6 col-sm-12">
                <div class="col-content">

                </div>
            </div>
        </div>
        <div class="main-row">
            <div class="col col-xxlg-8 col-lg-12">
                <div class="col-content">

                </div>
            </div>
            <div class="col col-xxlg-4 col-lg-12">
                <div class="col-content">

                </div>
            </div>
           
        </div>
        <div class="main-row">
            <div class="col col-xxlg-4">
                <div class="col-content">

                </div>
            </div>
            <div class="col col-xxlg-8">
                <div class="col-content">

                </div>
            </div>
           
        </div>
        <div class="main-row">
            <div class="col col-xxlg-4 col-md-12">
                <div class="col-content">

                </div>
            </div>
            <div class="col col-xxlg-4 col-md-12" >
                <div class="col-content" id="J_echart1">

                </div>
            </div>
            <div class="col col-xxlg-4 col-md-12" >
                <div class="col-content" id="J_echart2">

                </div>
            </div>           
        </div>
    </main>
    <footer class="footer">
        1
    </footer>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>


    <script>
        // var menuItems=document.querySelectorAll('.menu .menu-item');
        // var menuItemTitles=document.querySelectorAll('.menu .menu-item-title');
        // menuItemTitles.addEventListener('click',function(){
            
        // })
        $('.menu .menu-item-title').click(function(){
            // if(document.documentElement.clientWidth<1400)
            //     return;
            if(!$(this).parents('.menu-item').hasClass('menu-item-active')){
                $(this).parents('.menu-item').addClass('menu-item-active');
                var h=$(this).siblings('.menu-item-body')[0].clientHeight;
                h=h+40+'px';
                $(this).parents('.menu-item').height(h);
                $(this)[0].tag='isShow';
            }else{
                $(this).parents('.menu-item').removeClass('menu-item-active');              
                var h=40+'px';
                $(this).parents('.menu-item').height(h);
                $(this)[0].tag='isHide';
            }           
        })
        window.addEventListener('resize',function(){
            $('.menu-item').removeClass('menu-item-active');
            $('.menu-item').height(40);
        })
    </script>
    <script>
        var menuBtn=document.getElementById('J_menuBtn');
        var navlist= document.getElementById('J_navlist');
        menuBtn.addEventListener('click',function(){
            navlist.classList.toggle('sm-flex');
        })
    </script>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('J_echart1'));
        var myChart2 = echarts.init(document.getElementById('J_echart2'));
        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };
        var option2 = {
            title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ],
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
        myChart2.setOption(option2);
        window.addEventListener('resize',function(){
            myChart1.resize();
            myChart2.resize();
        })
    </script>
</body>
</html>